---
import type { MarkdownHeading } from 'astro';
import Clock from '../components/others/Clock.vue';
import SidebarCategories from '../components/categories/SidebarCategories.astro';
import Tags from '../components/others/Tags.astro';

const { tags = [] as string[], categories = [] as any[], headings = [] as MarkdownHeading[] } = Astro.props;
import '../styles/layouts/rightSidebar.styl';
---

<sidebar class="right-sidebar">
  <!-- 时钟组件 -->
  <div class="clock-section fade-in-right delay-100">
    <Clock client:idle format="24hour" showDate={true} updateInterval={1000} />
  </div>
  
  <!-- 文章目录部分 -->
  <div class="sidebar-section toc-container fade-in-right delay-200">
    <div class="section-header">
      <h2 class="section-title">文章目录</h2>
      <button id="toc-toggle" class="section-toggle" aria-label="折叠目录">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
          <path fill="currentColor" d="M7 10l5 5 5-5z"></path>
        </svg>
      </button>
    </div>
    <div id="toc-content" class="section-content">
      {headings && headings.length > 0 ? (
        <ul class="toc-list">
          {headings.map((heading:any) => (
            <li class={`toc-item toc-item-h${heading.depth}`}>
              <a href={`#${heading.slug}`}>{heading.text}</a>
            </li>
          ))}
        </ul>
      ) : (
        <div class="no-content-message">
          暂无目录
        </div>
      )}
    </div>
  </div>    <!-- 使用新的侧边栏分类组件 -->
  <SidebarCategories currentCategories={categories} />
  
  <!-- 复用标签组件 -->
  <Tags tags={tags} />
</sidebar>

<script>
  // 文章目录折叠/展开功能
  document.addEventListener('DOMContentLoaded', () => {
    // 为目录添加事件监听
    const tocToggle = document.getElementById('toc-toggle');
    const tocContent = document.getElementById('toc-content');
    
    if (tocToggle && tocContent) {
      tocToggle.addEventListener('click', () => {
        const isCollapsing = !tocContent.classList.contains('collapsed');
        
        // 与分类和标签组件保持一致的过渡时间
        if (isCollapsing) {
          // 快速折叠 (250ms)
          tocContent.style.transition = 'max-height 0.25s ease, opacity 0.25s ease';
        } else {
          // 缓慢展开 (600ms)
          tocContent.style.transition = 'max-height 0.6s ease, opacity 0.6s ease';
        }
        
        tocContent.classList.toggle('collapsed');
        tocToggle.classList.toggle('collapsed');
      });
    }
    
    // 添加平滑滚动功能
    const tocLinks = document.querySelectorAll('.toc-item a');
    
    tocLinks.forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault(); // 阻止默认行为
        
        const targetId = link.getAttribute('href')?.substring(1); // 去掉 # 号
        if (!targetId) return;
        
        const targetElement = document.getElementById(targetId);
        if (!targetElement) return;
        
        // 获取目标元素的位置
        const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY;
        
        // 添加一点偏移量，让标题不会太靠近页面顶部
        const offset = 80;
        
        // 平滑滚动到目标位置
        window.scrollTo({
          top: targetPosition - offset,
          behavior: 'smooth'
        });
        
        // 更新 URL，但不引起页面跳转
        history.pushState(null, '', `#${targetId}`);
      });
    });
  });
</script>
